/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */
import React, { useEffect, useRef, useCallback } from 'react'
import { Provider } from 'react-redux'
import store from '@REDUX/store'
import Navigation from '@NAVIGATION/Navigation'
import { NavigationContainer } from '@react-navigation/native'
import { persistStore } from 'redux-persist'
import EStyleSheet from 'react-native-extended-stylesheet'
import { PersistGate } from 'redux-persist/integration/react'
import theme from '@THEME/index'
import Storage, { StorageKey } from '@UTILS/Storage'
import Router from '@NAVIGATION/Router'
import Portal from '@COMPONENTS/portal'
import initConfig from '@UTILS/policy'
import AnalyticsUtil from '@UTILS/AnalyticsUtil'
import { Text } from 'react-native'
import { isAndroid } from '@UTILS/Common'
import { GestureHandlerRootView } from 'react-native-gesture-handler'

EStyleSheet.build(theme)

const persistor = persistStore(store, null)

const appFirstLoad = async () => {
  const displayedPrivacyPolicy = Storage.get(StorageKey.displayedPrivacyPolicy)
  return displayedPrivacyPolicy
}

if (isAndroid) {
  // @ts-ignore
  const originTextRender = Text.render
  // @ts-ignore
  Text.render = function render(props, ref) {
    return originTextRender.apply(this, [
      {
        ...props,
        // @ts-ignore
        style: [{ fontWeight: '' }, props.style],
      },
      ref,
    ])
  }
}

function App() {
  const stateRef = useRef<{ index: number, name?: string }>()
  const agreedPrivacyAgreement = useCallback(async () => {
    const isFirstLoad = await appFirstLoad()
    if (isFirstLoad) initConfig()
  }, [])

  useEffect(() => {
    agreedPrivacyAgreement()
  }, [agreedPrivacyAgreement])

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer
        ref={Navigation.navigationRef}
        onStateChange={async (state) => {
          const preIndex = stateRef.current?.index || -1
          const curIndex = state?.index || 0
          try {
            if (!stateRef.current || curIndex > preIndex) {
              const routerName = state?.routes[curIndex]?.name
              AnalyticsUtil.onPageStart(routerName)
              stateRef.current = { index: curIndex, name: routerName }
            } else if (curIndex < preIndex) {
              AnalyticsUtil.onPageEnd(stateRef.current?.name)
              const routerName = state?.routes[curIndex]?.name
              stateRef.current = { index: curIndex, name: routerName }
            } else {
              const routerName = state?.routes[curIndex]?.name
              AnalyticsUtil.onPageStart(routerName)
            }
          // eslint-disable-next-line no-empty
          } catch (e) {}
        }}
      >
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <Portal.Host>
              <Router />
            </Portal.Host>
          </PersistGate>
        </Provider>
      </NavigationContainer>
    </GestureHandlerRootView>
  )
}

export default App

// if (process.env.NODE_ENV === 'development') {
//   global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest
// }
